<template>
	<view :style="themeColor">
		<view class="page">
			<view
				class="flex benben-position-layout flex flex-wrap align-center buyNow_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }"
			>
				<view class='flex flex-wrap align-center justify-between flex-sub buyNow_fd0_0'>
					<view
						class='flex flex-wrap align-center buyNow_fd0_0_c0'
						@tap.stop="handleJumpDiy"
						data-type="back"
						data-url="1"
					>
						<text class='fu-iconfont2  buyNow_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text
							class='buyNow_fd0_0_c1_c0'
							style="font-family: Alimama DongFangDaKai, Alimama DongFangDaKai;"
						>立即购买</text>
					</view>
					<view class='flex flex-wrap align-center justify-end buyNow_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout buyNow_flex_1">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class='flex justify-between flex-wrap align-center buyNow_fd1_0_c0'>
						<view class="course_title_1">课程信息</view>
						<view class="course_title_2">{{course_name}}</view>
					</view>
					<view class='buyNow_fd1_0_c1'>
						<view
							class="course_title_1"
							style="margin-bottom: 36rpx;"
						>学生信息</view>
						<view class="input_item">
							<view class="input_item_left"><text style="color: #f00;">*</text>姓名</view>
							<input
								class="input_item_right"
								:maxlength="15"
								v-model="name"
								type="text"
								placeholder="请输入"
								placeholder-style="input_item_right_placeholder"
							>
						</view>
						<view class="input_item">
							<view class="input_item_left">年龄</view>
							<input
								class="input_item_right"
								:maxlength="3"
								v-model="age"
								type="number"
								placeholder="请输入"
								placeholder-style="input_item_right_placeholder"
							>
						</view>
						<view class="select_item">
							<view class="select_item_left">性别</view>
							<view class="select_item_right">
								<view
									class="select_item_right_view flex align-center"
									@tap.stop="sex = 1"
								>
									<image
										:src='STATIC_URL+"689.png"'
										mode=""
										v-if="sex == 1"
									></image>
									<image
										:src='STATIC_URL+"690.png"'
										mode=""
										v-else
									></image>
									<view class="">男</view>
								</view>
								<view
									class="select_item_right_view flex align-center"
									@tap.stop="sex = 2"
								>
									<image
										:src='STATIC_URL+"689.png"'
										mode=""
										v-if="sex == 2"
									></image>
									<image
										:src='STATIC_URL+"690.png"'
										mode=""
										v-else
									></image>
									<view class="">女</view>
								</view>
							</view>
						</view>
						<view class="input_item">
							<view class="input_item_left"><text style="color: #f00;">*</text>地址</view>
							<input
								class="input_item_right"
								:maxlength="-1"
								v-model="address"
								type="text"
								placeholder="请输入"
								placeholder-style="input_item_right_placeholder"
							>
						</view>
						<view class="tips_item">*填写信息便于平台寄教材</view>
					</view>
					<view class='buyNow_fd1_0_c2'>
						<view class="course_title_1">付款信息</view>
						<view class="price_item">
							<view class="price_item_left">课程总额</view>
							<view class="price_item_right">￥{{totalMoney}}</view>
						</view>
						<view
							class="price_item"
							@tap.stop="openPopup"
						>
							<view class="price_item_left">优惠券</view>
							<view class="price_item_right">
								<view
									class=""
									v-if="!coupon_name"
								>选择优惠券</view>
								<view class="">{{coupon_name}}</view>
								<image
									:src='STATIC_URL+"632.png"'
									mode="aspectFill"
								></image>
							</view>
						</view>
						<view class="total_item">
							<text class="total_item_1">合计</text>
							<text class="total_item_2">￥</text>
							<text class="total_item_3">{{ totalMoney | frontPrice }}</text>
							<text class="total_item_2">{{ totalMoney | laterPrice }}</text>
						</view>
					</view>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex buyNow_flex_2">
				<view class='flex flex-wrap align-center'>
					<text class='buyNow_fd2_0_c0'>总计：</text>
					<text class='buyNow_fd2_0_c1'>￥</text>
					<text class=' buyNow_fd2_0_c2'>
						<text class='buyNow_price1_fd2_0_c2'>{{ totalMoney | frontPrice }}</text>
						<text class='buyNow_price1_fd2_0_c2'>{{ totalMoney | laterPrice }}</text>
					</text>
					<view
						class='flex flex-wrap align-center justify-center buyNow_fd2_0_c3'
						@tap.stop="submit"
					>
						<text class='buyNow_fd2_0_c3_c0'>提交订单</text>
					</view>
				</view>

			</view>
			<view :style="{height: '98rpx'}"></view>


			<benben-popup
				v-model="popupShow1698283017948"
				:mask="true"
				:mask-close-able="true"
				mode='center'
				:z-index='999'
			>
				<!---flex布局flex布局开始-->
				<view class="flex benben-flex-layout flex-wrap align-center">
					<view class='flex flex-direction flex-wrap align-stretch homePage_fd2_0'>
						<scroll-view
							class="scroll_content"
							:scroll-y="true"
						>
							<view
								class='flex flex-wrap align-center homePage_fd2_0_c0'
								v-for="(v, k) in popupList"
								:key="k"
								@tap.stop="selectPopup(v.coupon_id, v.money, v.name)"
							>
								<view class='flex flex-direction flex-wrap align-stretch homePage_fd2_0_c0_c0'>
									<view class='flex flex-wrap align-center'>
										<text class='homePage_fd2_0_c0_c0_c0_c0'>￥</text>
										<text class='homePage_fd2_0_c0_c0_c0_c1'>{{Number(v.money)}}</text>
									</view>
									<view class='flex flex-wrap align-center justify-center homePage_fd2_0_c0_c0_c1'>
										<text class='homePage_fd2_0_c0_c0_c1_c0'>满</text>
										<text class='homePage_fd2_0_c0_c0_c1_c0'>{{Number(v.min_order_money)}}</text>
										<text class='homePage_fd2_0_c0_c0_c1_c0'>可减</text>
									</view>
								</view>
								<view class='flex flex-direction flex-wrap align-stretch flex-sub homePage_fd2_0_c0_c1'>
									<view class='flex flex-wrap align-center'>
										<text class='homePage_fd2_0_c0_c1_c0_c0'>{{v.name}}</text>
									</view>
									<view class='flex flex-wrap align-center homePage_fd2_0_c0_c1_c1'>
										<text class='homePage_fd2_0_c0_c1_c1_c0'>{{v.content}}</text>
									</view>
									<view class='flex flex-wrap align-center homePage_fd2_0_c0_c1_c2'>
										<text class='homePage_fd2_0_c0_c1_c1_c0'>{{v.start_time}}-{{v.end_time}}</text>
									</view>
								</view>
							</view>
						</scroll-view>
						<view
							class='flex flex-wrap align-center homePage_fd2_0_c3'
							@tap.stop="popupShow1698283017948=false"
						>
						</view>
					</view>
				</view>

				<!---flex布局flex布局结束-->

			</benben-popup>


		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				course_name: "",
				aid: "",
				price: 0,
				name: "",
				age: "",
				address: "",
				sex: 1,
				popupShow1698283017948: false,
				popupList: [],
				coupon_id: "",
				coupon_price: "",
				coupon_name: "",
				totalMoney: 0,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				course_name,
				aid,
				price
			} = options;
			if (course_name !== undefined) this.course_name = course_name;
			if (aid !== undefined) this.aid = aid;
			if (price !== undefined) this.price = price;
			this.totalMoney = this.price;
			this.getPopup();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 提交课程订单  65556dcb4cba1
			submit() {
				if (!this.name) {
					this.$message.info('请输入姓名');
					return;
				}
				if (!this.address) {
					this.$message.info('请输入详细地址');
					return;
				}
				this.$api.post(global.API_VERSION + '65556dcb4cba1', {
					package_id: this.aid,
					receiver_name: this.name,
					age: this.age,
					sex: this.sex,
					address: this.address,
					coupon_id: this.coupon_id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/shouye/pay/pay?order_sn=' + res.data.data.order_sn + '&money=' + res.data.data.payable_money
							})
						}, 800)
					}
				})
			},

			// 获取可以用的优惠券  6554c946c0fad
			getPopup() {
				this.$api.post(global.API_VERSION + '6554c946c0fad', {
					money: this.price
				}).then(res => {
					if (res.data.code == 1) {
						this.popupList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectPopup(coupon_id, coupon_price, coupon_name) {
				this.coupon_id = coupon_id;
				this.coupon_price = coupon_price;
				this.coupon_name = coupon_name;
				this.popupShow1698283017948 = false;
				this.totalMoney = Number(this.price) - Number(this.coupon_price);
				this.$forceUpdate();
			},
			openPopup() {
				if (this.popupList.length == 0) {
					this.$message.info('没有可用的优惠券');
					return;
				}
				this.popupShow1698283017948 = true;
			},
		}
	};
</script>
<style
	lang="scss"
	scoped
>
	.input_item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.input_item_left {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.input_item_right {
			text-align: right;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.input_item_right_placeholder {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
	}

	.select_item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.select_item_left {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.select_item_right {
			display: flex;

			.select_item_right_view {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 24rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
					transform: translateY(3rpx);
				}
			}
		}
	}

	.price_item {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.price_item_left {
			font-size: 32rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		.price_item_right {
			font-size: 32rpx;
			font-family: SF Pro Text-Regular, SF Pro Text;
			font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;

			image {
				width: 14rpx;
				height: 28rpx;
				margin-left: 16rpx;
			}
		}

	}

	.total_item {
		text-align: right;
		margin-top: 40rpx;

		.total_item_1 {
			font-size: 24rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin-right: 10rpx;
		}

		.total_item_2 {
			font-size: 22rpx;
			font-family: SF Pro Text-Medium, SF Pro Text;
			font-weight: 500;
			color: #AD3823;
		}

		.total_item_3 {
			font-size: 32rpx;
			font-family: SF Pro Text-Medium, SF Pro Text;
			font-weight: 500;
			color: #AD3823;
		}
	}

	.tips_item {
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #62889B;
	}

	.course_title_1 {
		font-size: 40rpx;
		font-family: Alimama DongFangDaKai-Regular, Alimama DongFangDaKai;
		font-weight: 400;
		color: #333333;
	}

	.course_title_2 {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://www.guochaoxiaoju.com/uploads/mini/520.png) no-repeat;
		background-size: 100% auto;
	}

	.buyNow_flex_0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/520.png) no-repeat;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.buyNow_fd0_0_c1_c0 {
		font-size: 40rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 88rpx;
	}

	.buyNow_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: var(--benbenFontColor3);
	}

	.buyNow_fd0_0_c0 {
		width: 120rpx;
	}

	.buyNow_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.buyNow_flex_1 {
		padding: 30rpx 30rpx 0rpx 30rpx;
	}

	.buyNow_fd1_0_c2 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 690rpx;
		// height: 328rpx;
		padding: 32rpx 24rpx;
	}

	.buyNow_fd1_0_c1 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 690rpx;
		// height: 456rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
		padding: 32rpx 24rpx 40rpx;
	}

	.buyNow_fd1_0_c0 {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 690rpx;
		height: 102rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
		padding: 0 24rpx 0 22rpx;
	}

	.buyNow_flex_2 {
		background: #FFFFFF;
		width: 750rpx;
		height: 98rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.buyNow_fd2_0_c3_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
	}

	.buyNow_fd2_0_c3 {
		background: linear-gradient(133deg, #AD3823 0%, #96301D 100%);
		margin: 0rpx 0rpx 0rpx auto;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		width: 232rpx;
		height: 98rpx;
	}

	.buyNow_price1_fd2_0_c2 {
		font-size: 34rpx;
	}

	.buyNow_fd2_0_c2 {
		color: rgba(173, 56, 35, 1);
		font-weight: 600;
	}

	.buyNow_fd2_0_c1 {
		color: rgba(173, 56, 35, 1);
		font-size: 32rpx;
		font-weight: 700;
	}

	.buyNow_fd2_0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		margin: 0rpx 0rpx 0rpx 30rpx;
	}


	.homePage_fd2_0_c4 {
		background: linear-gradient(165deg, #BB4833 0%, #962F1D 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		width: 396rpx;
		line-height: 54rpx;
		font-size: 34rpx;
		color: #fff;
		height: 54rpx;
		box-shadow: 5rpx 4rpx 4rpx 1rpx rgba(161, 55, 35, 0.16);
		margin: 17rpx 0rpx 0rpx 0rpx;
	}

	.homePage_fd2_0_c3 {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 0rpx;
		top: 7rpx;
	}

	.homePage_fd2_0_c2_c0 {
		color: #999999;
		font-size: 17rpx;
		font-weight: 400;
		width: 254rpx;
		text-align: center;
	}

	.homePage_fd2_0_c1 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/700.png) no-repeat;
		height: 126rpx;
		width: 401rpx;
		background-size: 100% auto;
		padding: 0rpx 0rpx 0rpx 0rpx;
		margin: 24rpx 0rpx 15rpx 0rpx;
	}

	.homePage_fd2_0_c0_c1_c2 {
		color: rgba(51, 51, 51, 1);
		font-size: 20rpx;
	}

	.homePage_fd2_0_c0_c1_c1_c0 {
		color: #999999;
		font-size: 16rpx;
		font-weight: 400;
	}

	.homePage_fd2_0_c0_c1_c1 {
		margin: 17rpx 0rpx 5rpx 0rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 20rpx;
	}

	.homePage_fd2_0_c0_c1_c0_c0 {
		color: #333333;
		font-size: 23rpx;
		font-weight: 400;
		width: 100%;
		display: -webkit-box;
		/* 对象作为弹性盒子模型显示 */
		overflow: hidden;
		/* 溢出隐藏 */
		-webkit-box-orient: vertical;
		/* 设置伸缩盒子对象的子元素的排列方式 */
		-webkit-line-clamp: 1;
		/* 设置块元素包含的文本行数 */
	}

	.homePage_fd2_0_c0_c1 {
		// margin: 0rpx 0rpx 0rpx 47rpx;
		padding: 0 40rpx 0 50rpx;
	}

	.homePage_fd2_0_c0_c0_c1_c0 {
		color: #FCF8F2;
		font-size: 19rpx;
		font-weight: 400;
	}

	.homePage_fd2_0_c0_c0_c1 {
		color: #FCF8F2;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 28rpx;
		white-space: nowrap;
	}

	.homePage_fd2_0_c0_c0_c0_c1 {
		color: #FCF8F2;
		font-size: 56rpx;
		font-weight: 400;
	}

	.homePage_fd2_0_c0_c0_c0_c0 {
		color: #FCF8F2;
		font-size: 17rpx;
		font-weight: 400;
		transform: translateY(10rpx);
	}

	.homePage_fd2_0_c0_c0 {
		margin: 0rpx 0rpx 0rpx 19rpx;
	}

	.homePage_fd2_0_c0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/722.png) no-repeat;
		height: 126rpx;
		width: 420rpx;
		background-size: 100% auto;
		padding: 0rpx 0rpx 0rpx 0rpx;
		margin-bottom: 20rpx;
	}

	.homePage_fd2_0 {
		background: url(https://www.guochaoxiaoju.com/uploads/mini/721.png) no-repeat;
		width: 646rpx;
		height: 553rpx;
		background-size: 100% auto;
		padding: 52rpx 62rpx 45rpx 183rpx;

	}

	.scroll_content {
		width: 646rpx;
		height: 426rpx;
	}
</style>